<template>
  <div>
    <!-- <el-dialog
      title="弹出"
      :visible.sync="showDialog"
      width="30%"
      @close="close"
    > -->
    <!-- 上下两块是等价的 -->
    <el-dialog
      title="弹出"
      :visible="showDialog"
      @update:visible="showDialog = $event"
      width="30%"
      @close="close"
    >
      <span>内容</span>
      <span slot="footer">
        <el-button @click="showDialog = false">Cancel</el-button>
        <el-button type="primary">OK</el-button>
      </span>
    </el-dialog>
    <hr />
    <div>
      <el-button type="primary" size="default" @click="showDialog = true"
        >打开</el-button
      >
    </div>
  </div>
</template>

<script>
// :visible="showDialog"
// @update:visible="showDialog = $event"
// 上边等价于 :visible.sync="showDialog"
export default {
  data () {
    return {
      showDialog: false
    }
  },
  methods: {
    close () {
      console.log('close')
    }
  },
}
</script>

<style lang="less" scoped>
</style>